<template>
  <NavBarCmp :leftArrow="true" />
  <div class="video-player">
    <video ref="videoPlayer" autoplay :poster="currentPreview.video.imgUrl" preload="auto" crossorigin="anonymous"
      playsinline @ended="onVideoEnd" v-if="currentPreview.video" :controls="showControls">
      <source :src="currentPreview.video.url" type="video/mp4" />
    </video>
  </div>
  <van-tabs>
    <van-tab title="简介">

      <template #default>

        <div class="info">
          <div class="preview-title">{{ currentPreview.title }}</div>
          <div class="pubDate">{{ timestampToDate(currentPreview.onlineTime) }}</div>


          <div class="share-info">
            <div class="thumb">
              <van-icon name="good-job" size="30" color="#666" />
              <div class="num">{{ currentPreview.upCount }}</div>
            </div>
            <div class="comment">
              <van-icon name="chat" size="30" color="#666" />
              <div class="num">{{ currentPreview.commentCount }}</div>
            </div>

          </div>

          <div class="card">

            <img :src="currentPreview.product.img" :alt="currentPreview.product.name">

            <div class="movie-title">{{ currentPreview.product.name }}</div>
            <van-button></van-button>


          </div>









        </div>
      </template>
    </van-tab>
    <van-tab>
      <template #title> 评论 </template>
      <template #default>11</template>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { timestampToDate } from '@/tools/index.js'

import { useRoute } from 'vue-router'
const route = useRoute()

import { useStore } from '@/stores/index.js'
const store = useStore()

import { computed, ref } from 'vue'

const showControls = ref(true)

const videoId = computed(() => route.query.videoId)

const currentPreview = computed(() => {
  return store.movieDetailPage.movieClipList.find((clip) => clip.id === parseInt(videoId.value))
});
</script>

<style scoped>
.video-player {
  width: 100%;
  line-height: 0;
  margin-top: 50.5px;
}

video {
  width: 100%;

}

.info {
  background-color: #fff;
  padding: 10px 20px;

}


.preview-title {
  font-size: 17px;
  color: #333;
  background-color: #fff;
  margin-bottom: 10px;
}

.pubDate {
  font-size: 13px;
  color: #999;
  letter-spacing: 0;
  background-color: #fff;
  margin-bottom: 10px;
}

.share-info {
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 这行定义了两列，每列的宽度是1fr，即每一列都获得相同的空间 */
  gap: 0px;
  align-items: center;
  /* 可选：设置列之间的间距 */
}

.thumb,
.comment {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 20px;
}


.card {
  border: 1px solid #eee;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card img {
  width: 50px;
  height: 70px;
}
</style>
